<template>
  <div class="div-pop" catchtouchmove="true">
    <div v-if="!forgetPwBoolean" class="get-user-info">
      <div class="top-nav" :style="'height: '+ spaceBarHeight + 'px; padding-top: '+ statusBarTop + 'px;'">
        <div class="flex-center v-align-c">
          <div
            :style="'width: '+ (spaceBarHeight - statusBarTop) + 'px; height: '+ (spaceBarHeight - statusBarTop - 10) + 'px;'"
            class="self-back flex flex-center"
            @click="backPage">
            <van-icon name="arrow" class="font-color-white" size="22px"/>
          </div>
          <div class="flex-item">
            <div class="top-txt flex flex-center" :style="'height: '+ (spaceBarHeight - statusBarTop - 10) + 'px;'">
              <div>{{ appInfo.appName }}</div>
            </div>
          </div>
          <div :style="'width: '+ (spaceBarHeight - statusBarTop) + 'px;'"></div>
        </div>
      </div>
      <div :style="'height: '+ spaceBarHeight + 'px'"></div>
      <img
        v-if="fileSpace"
        :src="fileSpace + '/images/bg-anchor.png'"
         :style="'top: '+ spaceBarHeight + 'px'"
        class="bg-top" alt="">
      <div class="mar-l-10 mar-r-10 main-login">
        <h2>登录</h2>
        <div class="form">
          <div>
            <van-field :value="phone" placeholder="请输入手机号" @input="phoneInput"/>
          </div>
          <div class="mar-t-12">
            <van-field class="mar-t-19" type="password" :value="password" placeholder="密码" @input="passwordInput"/>
          </div>
          <div class="font-12 text-align-r forget-pw mar-r--6 pad-t-2">
            <span class="pad-t-10 pad-b-10 pad-l-15" @click="forgetPwBoolean = true">忘记密码？</span>
          </div>
          <div class="login-btn" @click="login">登录</div>
        </div>
      </div>
    </div>
    <forget-password v-if="forgetPwBoolean"></forget-password>
  </div>
</template>

<script>
import { doLoginPartner, doSaveLoginRecord } from '@/api/common'
import { setCustomerId, setMemberId, setPhone, setEnterpriseId, setRoleType, setNickName, setAnchorType } from '@/utils/auth'
import ForgetPassword from '@/components/ForgetPassword'

export default {
  components: { ForgetPassword },
  data() {
    return {
      statusBarHeight: 0,
      spaceBarHeight: 0,
      statusBarTop: 0,
      appInfo: {},
      phone: '',
      password: '',
      forgetPwBoolean: false
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
    this.spaceBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
    this.statusBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
    // 店铺信息栏
    this.statusBarTop = this.statusBarHeight - 38
    let sysInfo = ''
    sysInfo = this.$pt.getSystemInfoSync()
    if (sysInfo.system.indexOf('iOS') === -1) {
      this.statusBarTop = this.statusBarHeight - 37
    }
    this.appInfo = this.$pt.getStorageSync('appInfo')
  },
  onShow() {
  },
  mounted() {
  },
  methods: {
    backPage() {
      if (this.getRoleType === 2) {
        this.$parent.userLoginBoolean = false
        this.$parent.$parent.userTypeBoolean = true
        if (this.getCurrentPage().page.route === 'pages/shop/detail/main') return
        this.$parent.$parent.hideTabBar()
        return
      }
      this.$parent.userLoginBoolean = false
    },
    phoneInput(e) {
      this.phone = e.mp.detail
    },
    passwordInput(e) {
      this.password = e.mp.detail
    },
    login() {
      doLoginPartner({
        roleType: '2',
        phone: this.phone,
        password: this.password,
        openId: this.getOpenId
      }).then((response) => {
        if (response.isError) return
        setCustomerId(response.data.partnerId)
        setMemberId(response.data.partnerId)
        setPhone(response.data.phone)
        setRoleType(response.data.roleType)
        if (response.data.partnerName) {
          setNickName(response.data.partnerName)
        }
        if (response.data.enterpriseId) {
          setEnterpriseId(response.data.enterpriseId)
        }
        setAnchorType(1)
        this.doSaveLoginRecord()
        this.$parent.$parent.userTypeBoolean = false
        this.$pt.setStorageSync('anchorBack', true)
        // 除去商品详情登录完成后
        if (this.getCurrentPage().page.route !== 'pages/shop/detail/main') {
          this.$parent.$parent.showTabBar()
          this.$parent.$parent.registerBoolean = false
        }
        this.$parent.$parent.loginBackEls()
      }).catch(() => {
      })
    },
    doSaveLoginRecord() {
      doSaveLoginRecord({
        roleType: '2',
        phone: this.phone,
        password: this.password,
        openId: this.getOpenId
      }).then((response) => {
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped lang="less">
  .forget-pw{
    color: #7427FF;
    span{
      display: inline-block;
    }
  }
  .div-pop{
    z-index: 1200;
  }
  .get-user-info {
    width: 375px;
    height: calc(100vh);
    background-color: #f5f5f5;
    overflow: hidden;    
    .top-nav{
      background: #7427ff;
      color: #ffffff;
      box-sizing: border-box;
      text-align: center;
      font-size: 15px;
      position: fixed;
      width: 100%;
      left: 0;
      top: 0;
      z-index: 100;
      .top-txt{
        font-size: 18px;
        color: #ffffff;
      }
      .self-back {
        transform: rotate(180deg);
      }
    }
    .bg-top{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 178px;
      z-index: 1201;
    }
    .main-login{
      position: relative;
      z-index: 1205;
      h2{
        margin: 12px 2px 0 2px;
        padding: 0;
        font-size: 27px;
        font-weight: normal;
        color: #fff;
      }
      .form{
        padding: 23px 23px 30px 10px;
        // height: 278px;
        border-radius: 10px;
        background-color: #FFF;
        margin-top: 13px;
        overflow: hidden;
        /deep/ .van-field__input{
          font-size: 15px;
          height: 31px;
          min-height: 31px;
        }
        .login-btn{
          width: 290px;
          height: 45px;
          line-height: 45px;
          text-align: center;
          color: #FFF;
          background-color: #7427ff;
          font-size: 16px;
          font-weight: bold;
          border-radius: 22px;
          margin: 27px auto 0;
        }
      }
    }
    .user-list{
      padding-top: 6px;
      li{
        background-color: #fff;
        padding: 26px 30px 26px 22px;
        margin-top: 17px;
      }
    }
  }
</style>
